<template>
  <div class="wholeStationPromotion">
    <div class="searchBar">
      <el-date-picker
        v-model="searchParams.dates"
        type="datetimerange"
        :clearable="false"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <el-select
        style="margin-left: 14px;"
        v-model="searchParams.type"
        :clearable="false"
        placeholder="请选择">
        <el-option label="汇总" :value="1"></el-option>
        <el-option label="全站推广" :value="2"></el-option>
        <el-option label="标准推广" :value="3"></el-option>
      </el-select>
      <el-button style="margin-left: 14px;" type="primary" @click="handleSearch">查询</el-button>
    </div>
    <el-table
      :data="tableData"
      height="100%"
      style="width: 100%">
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          {{scope.$index + 1 + (searchParams.pageNum - 1) * searchParams.pageSize}}
        </template>
      </el-table-column>
      <el-table-column prop="shopName" label="店铺" width="120"></el-table-column>
      <el-table-column prop="productId" label="商品ID" width="120"></el-table-column>
      <el-table-column prop="planName" label="计划名称" width="300"></el-table-column>
      <el-table-column prop="unitPrice" label="拼单价"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="dailyLimit" label="日限额"></el-table-column>
      <el-table-column prop="optimizationGoal" label="优化目标"></el-table-column>
      <el-table-column prop="targetROI" label="投产比/成交" width="120"></el-table-column>
      <el-table-column prop="stage" label="阶段"></el-table-column>
      <el-table-column prop="exposureCount" label="曝光量"></el-table-column>
      <el-table-column prop="clickCount" label="点击量"></el-table-column>
      <el-table-column prop="clickThroughRate" label="点击率"></el-table-column>
      <el-table-column prop="conversionRate" label="转化率"></el-table-column>
      <el-table-column prop="cost" label="花费"></el-table-column>
      <el-table-column prop="turnover" label="交易额"></el-table-column>
      <el-table-column prop="actualROI" label="实际投产比" width="120"></el-table-column>
      <el-table-column prop="transactionCount" label="成交笔数"></el-table-column>
      <el-table-column prop="sitePromotionFeeRatio" label="全站推广费比" width="150"></el-table-column>
    </el-table>
    <div class="pageContain">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getProductPromotion } from "@/api/order";
import moment from 'moment';
export default {
  data() {
    const startTime = moment().subtract(1, 'days').format("yyyy-MM-DD 00:00:00");
    const endTime = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
    return {
      tableData: [],
      total: 0,
      searchParams: {
        shopId: "",
        orderByColumn: "",
        isAsc: "",
        reasonable: "",
        shopName: "",
        status: "",
        unitPrice: "",
        actualROI: "",
        pageSize: 100,
        pageNum: 1,
        dates: [startTime, endTime],
        type: 1
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick(picker) {
            const start = moment().subtract(1, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const start = moment().subtract(7, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        },  {
          text: '最近半个月',
          onClick(picker) {
            const start = moment().subtract(15, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const start = moment().subtract(30, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近二个月',
          onClick(picker) {
            const start = moment().subtract(60, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const start = moment().subtract(90, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }]
      },
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const params = {
        ...this.searchParams,
        startTime: this.searchParams.dates[0],
        endTime: this.searchParams.dates[1],
      }
      delete params.dates;
      getProductPromotion(params).then(res => {
        const { total, rows } = res;
        this.tableData = rows;
        this.total = total;
      })
    },
    handleSearch() {
      this.initData();
    },
    handleSizeChange(v) {
      this.searchParams.pageNum = 1;
      this.searchParams.pageSize = v;
      this.initData();
    },
    handleCurrentChange(v) {
      this.searchParams.pageNum = v;
      this.initData();
    },
  }
}
</script>
<style lang="scss" scoped>
div.searchBar {
  margin-bottom: 20px;
}
</style>
